<template>
  <el-menu :default-active="defaultActive">
    <nested-menu-item
      v-for="(item, index) in menuItems"
      :key="index"
      :item="item"
    ></nested-menu-item>
  </el-menu>
</template>

<script>
import NestedMenuItem from "./NestedMenuItem.vue";

export default {
  components: {
    "nested-menu-item": NestedMenuItem,
  },
  data() {
    return {
      defaultActive: "1",
      menuItems: [
        // Your menu items here
      ],
    };
  },
  created() {
    this.getMenus();
  },
  methods: {
    // 通过接口获取页面菜单信息
    getMenus() {
      const that = this;
      setTimeout(() => {
        const routes = [
          {
            path: "/",
            name: "home",
            index: "1",
            title: "首页",
            component: () => import("@/views/HomeView.vue"),
          },
          {
            path: "/test",
            name: "test",
            index: "2",
            title: "测试",
            component: () => import("@/views/TestView.vue"),
          },
          {
            path: "/handsontable",
            name: "handsontable",
            index: "4",
            title: "职能表格",
            component: () => import("@/views/HandsontableView.vue"),
          },
          {
            path: "/seting",
            name: "seting",
            title: "设置",
            index: "3",
            component: () => import("@/views/SetingView.vue"),
            children: [
              {
                path: "/seting/people",
                name: "people",
                title: "人员设置",
                index: "3-1",
                component: () => import("@/views/PeopleView.vue"),
              },
              {
                path: "/seting/role",
                name: "role",
                title: "角色设置",
                index: "3-2",
                component: () => import("@/views/RoleView.vue"),
              },
            ],
          },
        ];
        that.menuItems = routes;
        that.$router.addRoutes(routes);
      }, 1000);
    },
  },
};
</script>
